.hover-box-out {
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    position: absolute;
    top: 46px;
    left: 0;
    height: 230px;
    max-height: 230px;
    padding-top: 24px;
    padding-bottom: 38px;
    z-index: 9999;
    .container {
        height: 100%;
    }
    .hover-box-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        padding-left: 22px;
        padding-right: 130px;
        .area-public-style {
            display: flex;
            justify-content: flex-start;
            height: 100%;
            position: relative;
            .title-public {
                margin-right: 26px;
                .title-icon {
                    margin-bottom: 6px;
                    img {
                        width: 17px;
                        height: 17px;
                    }
                }
                .title-content {
                    font-size: 16px;
                    width: 20px;
                    word-wrap: break-word;
                    line-height: 20px;
                }
            }
            .list-item-public {
                .content-ul-public {
                    // display: flex;
                    // justify-content: space-between;
                    // flex-direction: column;
                    // flex-wrap: wrap;
                    color: #4C4C4C;
                    font-size: 16px;
                    max-height: 100%;
                    .content-li-public {
                        margin-right: 30px;
                        margin-bottom: 24px;
                        cursor: pointer;
                        &:nth-child(3n) {
                            margin-bottom: 0;
                        }
                        &:hover{
                            color: #FDB825;
                        }
                    }
                    img {
                        width: 36px;
                        height: 36px;
                        vertical-align: middle;
                        margin-right: 12px;
                    }
                    .high-low-li {
                        margin-bottom: 22px;
                        &:nth-child(4n) {
                            margin-bottom: 0;
                        }
                        &:nth-child(3n) {
                            margin-bottom: 22px;
                        }
                    }
                }
            }
            &::before {
                content: '';
                position: absolute;
                left: -26px;
                top:27px;
                width: 2px;
                height: 110px;
                background: #F0F0F0;
            }
            &:first-child {
                &:before {
                    width: 0;
                }
            }
        }
        .hot-lottery-title {
            color: #E52A20;
        }
        // .hover-box-line {
        //     width: 2px;
        //     height: 110px;
        //     background: #F0F0F0;
        // }
        .high-lottery-title {
            color: #FDB825;
        }
        .low-lottery-title {
            color: #D3B8FF;
        }
        .high-area,
        .low-area {
            margin-left: -130px;
            margin-right: 25px;
        }
    }
}